<template>
    <div class="pwd">
        <div class="pwdForm">
          <h2>修改密码</h2>
          <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
            <a-form-item label='旧密码' >
              <a-input
                v-decorator="['oldPass', { rules: [{ required: true, message: '请输入旧密码!' }] }]"
                placeholder="旧密码"
              />
            </a-form-item>
            <a-form-item label='新密码' >
              <a-input-password
                v-decorator="['newPass', { rules: [{ required: true, message: '请输入新密码!' }] }]"
                placeholder="新密码"
              ></a-input-password>
            </a-form-item>
            <a-form-item label='确认密码' >
              <a-input-password
                v-decorator="['resNewPass', { rules: [
                    { required: true, message: '请输入确认密码!' }, 
                    { validator: validateNewPassword2 }
                    ] 
                }]"
                placeholder="确认密码"
              ></a-input-password>
            </a-form-item>
            <a-button type="primary" html-type="submit" style="margin: 50px 0 0 -100px;">
              确认修改
            </a-button>
          </a-form>
        </div>
    </div>
</template>
<script>
import './styles.less'
import userAPI from '../../services/user'
import { requestWrapper } from '../../utils/request'
export default {
  data() {
    return {
      formLayout: 'inline',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
            delete values.resNewPass
            console.log(values);
          requestWrapper( userAPI.updateUserPwd.bind(null, values), {
              autoSuccess: true,
              successMessage: '修改成功，请重新登录！',
              errorMessage: '原密码错误！'
          }).then((res) => {
              this.$router.push({path:'/login'})
              localStorage.removeItem('myInfo');
          }) 
        }
      });
    },
    validateNewPassword2(rule, value, callback) {
         const form = this.form;
      if (value !== form.getFieldValue('newPass')) {
        callback(new Error("两次密码不一致"));
      } else {
        callback();
      }
    }
  },
};

</script>


